
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebAssembly 计算器实战示例</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8">
        <!-- 头部导航 -->
        <header class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-800 mb-4">
                <i class="fas fa-calculator text-blue-600 mr-3"></i>
                WebAssembly 计算器实战
            </h1>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                演示如何使用 C++ 编写 WebAssembly 模块，并在浏览器中通过 JavaScript 调用
            </p>
        </header>

        <!-- 主功能区域 -->
        <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden">
            <div class="grid md:grid-cols-2 gap-8 p-8">
                <!-- 计算器界面 -->
                <div class="space-y-6">
                    <h2 class="text-2xl font-semibold text-gray-800">在线计算器</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">第一个数字</label>
                            <input type="number" id="num1" value="25" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">第二个数字</label>
                            <input type="number" id="num2" value="5" 
                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                        <button onclick="performOperation('add')" 
                                class="btn-operation bg-blue-500 hover:bg-blue-600">
                            <i class="fas fa-plus mr-2"></i>加法
                        </button>
                        <button onclick="performOperation('subtract')" 
                                class="btn-operation bg-green-500 hover:bg-green-600">
                            <i class="fas fa-minus mr-2"></i>减法
                        </button>
                        <button onclick="performOperation('multiply')" 
                                class="btn-operation bg-yellow-500 hover:bg-yellow-600">
                            <i class="fas fa-times mr-2"></i>乘法
                        </button>
                        <button onclick="performOperation('divide')" 
                                class="btn-operation bg-red-500 hover:bg-red-600">
                            <i class="fas fa-divide mr-2"></i>除法
                        </button>
                        <button onclick="performOperation('power')" 
                                class="btn-operation bg-purple-500 hover:bg-purple-600">
                            <i class="fas fa-superscript mr-2"></i>幂运算
                        </button>
                        <button onclick="performSquareRoot()" 
                                class="btn-operation bg-indigo-500 hover:bg-indigo-600">
                            <i class="fas fa-square-root-alt mr-2"></i>平方根
                        </button>
                    </div>

                    <!-- 结果显示 -->
                    <div id="result" class="mt-6 p-4 bg-gray-50 rounded-lg hidden">
                        <h3 class="font-semibold text-gray-700 mb-2">计算结果</h3>
                        <div class="text-2xl font-bold text-green-600" id="resultValue"></div>
                        <div class="text-sm text-gray-500 mt-2" id="operationInfo"></div>
                    </div>
                </div>

                <!-- 信息面板 -->
                <div class="space-y-6">
                    <div class="bg-blue-50 p-6 rounded-xl">
                        <h3 class="text-xl font-semibold text-blue-800 mb-3">
                            <i class="fas fa-info-circle mr-2"></i>WebAssembly 信息
                        </h3>
                        <div class="space-y-3 text-sm text-blue-700">
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                        <span id="wasmStatus">WebAssembly 模块加载中...</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-microchip mr-2"></i>
                                <span>编译工具: Emscripten</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-bolt mr-2"></i>
                                <span>性能: 接近原生速度</span>
                            </div>
                        </div>
                    </div>

                    <!-- 历史记录 -->
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">
                            <i class="fas fa-history mr-2"></i>计算历史
                        </h3>
                        <div id="historyList" class="space-y-2 max-h-40 overflow-y-auto"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 状态显示区域 -->
        <div class="max-w-4xl mx-auto mt-8">
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">技术实现说明</h3>
                        <div class="grid md:grid-cols-2 gap-6 text-sm text-gray-600">
                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">C++ 到 WebAssembly 编译流程</h4>
                                    <ol class="list-decimal list-inside space-y-1">
                                        <li>使用 EMSCRIPTEN_KEEPALIVE 导出函数</li>
                                        <li>通过 Emscripten 编译为 .wasm 文件</li>
                                        <li>JavaScript 加载并实例化 Wasm 模块</li>
                                        <li>通过导出的函数进行高性能计算</li>
                                    </ol>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-700 mb-2">优势特点</h4>
                                    <ul class="list-disc list-inside space-y-1">
                                        <li>接近原生的计算性能</li>
                                        <li>跨平台兼容性</li>
                                        <li>安全沙箱环境</li>
                                        <li>与现代 Web 技术无缝集成</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>
